<template>
  <div class="el-scrollbar__view">
    <section class="app-main">
      <div class="app-container">
        <el-form :model="formInline" class="demo-input-suffix">
          <el-form-item class="el-form-item">
            <label class="el-form-item__label">区域搜索:</label>
            <el-input
              v-model="formInline.name"
              class="el-input--medium el-input--suffix"
              placeholder="请输入"
            />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form>
      </div>
    </section>
    <div class="result">
      <el-tabs v-model="activeTab">
        <el-row style="height:60px" type="flex" align="middle">
          <button data-v-0eafa14e="" type="button" class="el-button el-button--primary1 el-button--primary" @click="handleAdd">
            <svg version="1.1" viewBox="0 0 1024 1024" class="svg-icon svg-fill" style="width: 16px; height: 16px;"><defs />
              <path pid="0" d="M512 950.857a438.857 438.857 0 0 0 0-877.714 438.857 438.857 0 1 0 0 877.714zm0 73.143A512 512 0 1 1 512 0a512 512 0 1 1 0 1024zm-36.571-548.571V329.143a36.571 36.571 0 0 1 73.142 0v146.286h146.286a36.571 36.571 0 1 1 0 73.142H548.571v146.286a36.571 36.571 0 1 1-73.142 0V548.571H329.143a36.571 36.571 0 1 1 0-73.142h146.286z" _fill="#fff" />
            </svg>
            <span>新建</span>
          </button>
        </el-row>
        <el-table
          v-loading="loading"
          border
          style="width: 100%"
          :data="list"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="name"
            label="区域名称"
            width="220"
          />
          <el-table-column
            prop="nodeCount"
            label="点位数"
            width="220"
          />
          <el-table-column
            prop="remark"
            label="备注说明"
            width="220"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="250"
          >
            <template slot-scope="{row}">
              <el-button size="small" type="text" @click="handelArea(row)">查看详情</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button size="small" type="text" @click="handelEnid(row)">修改</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button size="small" type="text" plain @click="handelDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :current-page.sync="page.pageIndex"
            :page-size.sync="page.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :total="totalCount"
            @current-change="getPage"
            @size-change="getPage"
          />
        </el-row>
      </el-tabs>
      <Region ref="regionDialog" :dialog-visible.sync="dialogVisible" />
      <Area :changelist="addlist" :outer-vis.sync="outerVis" />
    </div>
  </div>
</template>

<script>
import { getPageApi, deletePointApi } from '@/api/point'
import Region from './components/regionDialog.vue'
import Area from './components/areaDetails.vue'
export default {
  name: '',
  components: {
    Region,
    Area
  },
  props: {},
  data() {
    return {
      formInline: {
        name: ''
      },
      page: {
        // 当前页码
        pageIndex: 1,
        // 每页数量
        pageSize: 10
      },
      // 总页数
      totalPage: 5,
      // 总数量
      totalCount: 10,
      list: [],
      // 搜索框
      input: '',
      // 新建
      activeTab: '',
      loading: false,
      dialogVisible: false,
      outerVis: false,
      addlist: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getPage()
  },
  methods: {
    async getPage() {
      try {
        const currentPageRecords = await getPageApi(this.page)
        this.list = currentPageRecords.data.currentPageRecords
        this.page.pageIndex = parseFloat(currentPageRecords.data.pageIndex)
        this.totalPage = parseFloat(currentPageRecords.data.totalPage)
        this.totalCount = parseFloat(currentPageRecords.data.totalCount)
      } catch (error) {
        console.log(error)
      }
    },
    handleAdd() {
      this.dialogVisible = true
    },
    handelEnid(row) {
      this.dialogVisible = true
      this.$refs.regionDialog.roleForm = { ...row }
    },
    async handelDel(id) {
      try {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          type: 'warning'
        })
        await deletePointApi(id)
        this.$message.success('删除成功')
        this.getPage()
      } catch (err) {
        console.log(err)
      }
    },
    handelArea(row) {
      this.outerVis = true
      this.addlist = { ...row }
      console.log(this.addlist)
    }
  }
}
</script>

<style scoped lang="scss">
  .el-scrollbar__view {
    background-color: #f8fcfd;
      .app-container {
        position: relative;
        padding: 0;
        .demo-input-suffix {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 64px;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          margin-bottom: 20px;
          padding-left: 17px;
          background-color: #fff;
          .el-form-item {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
            margin-bottom: 0px;
          }
          .el-form-item__label {
            width: 82px;
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 36px;
            padding: 0 12px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
          }
          .el-input {
            width: 209px;
            height: 36px;
            .el-input--medium .el-input__inner{
              height: 36px;
              line-height: 36px;
            }
            .el-input--suffix .el-input__inner{
              padding-right: 30px;
            }
          }
          .el-button{
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: flex;
            min-width: 80px;
            height: 36px;
            padding: 0;
            background-color: #5f84ff;
            font-size: 16px;
            border: none;
          }
        }
    }
  }
  .result {
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    .el-tabs {
      margin-bottom: 20px;
      display: flex;
      .el-tabs__header{
      margin: 0px;
    }
      .el-button--primary1 {
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 80px!important;
        height: 36px;
        padding: 0;
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        border: none;
      }
      .el-button--primary {
        color: #fff;
      }
      .el-button {
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        font-size: 14px;
        border-radius: 4px;
        .svg-icon {
          color: #fff;
          margin-right: 8px;
        }
      }
    }
  }
  .pagination-container {
    background: #fff;
    padding: 32px 16px;
    .el-pagination {
      display: flex;
      padding: 0;
      white-space: nowrap;
      color: #333;
      font-weight: 700;
      .el-pagination__total {
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 16px!important;
        color: #dbdfe5!important;
        .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          border-radius: 2px;
          background-color: #d5ddf8;
        }
        .btn-next {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          border-radius: 2px;
          background-color: #d5ddf8;
        }
      }

    }
  }
</style>
